<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自己的网页</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./reset.css">
    <script>
        window.onload=function () {
            var odiv=document.getElementById('div1');
            var oOl=odiv.getElementsByTagName('ol')[0];
            var aliOl=oOl.getElementsByTagName('li')
            var aUl=odiv.getElementsByTagName('ul')[0];
            var aliUl=aUl.getElementsByTagName('li');
            for(var i=0;i<aliOl.length;i++){
                aliOl[i].index=i;
                aliOl[i].onmouseover=function () {
                    for (var i=0;i<aliOl.length;i++){
                        aliOl[i].className="";
                        aliUl[i].style.display="none";
                    }
                    this.className="active";
                    aliUl[this.index].style.display="block";
                }
            }
        }
    </script>
</head>
<body>
       <div id="container">
           <div id="header">
               <img src="./images/logo.jpg" alt=""/>
               <ul id="nav">
                   <li><a href="#">导航1</a></li>
                   <li><a href="#">导航2</a></li>
                   <li><a href="#">导航3</a></li>
                   <li><a href="#">导航4</a></li>
                   <li><a href="#">导航5</a></li>
                   <li><a href="#">导航6</a></li>
                   <li><a href="#">导航7</a></li>
               </ul>
           </div>
           <img src="./images/about_banner.jpg" alt="" id="banner"/>
           <div id="main">
               <div id="lside">
                   <div class="subtitle">
                       <img src="./images/circle.gif" alt=""/>
                       <h1>核心业务</h1>
                       <a href="#">MORE&gt;&gt;</a>
                   </div>
                   <div class="four">
                       <h2>电子类商务建设</h2>
                       <img src="./images/eshop_service.jpg" alt=""/>
                       <ul>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                       </ul>
                   </div>
                   <div class="four">
                       <h2>电子类商务建设</h2>
                       <img src="./images/eshop_service.jpg" alt=""/>
                       <ul>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                       </ul>
                   </div>
                   <div class="four">
                       <h2>电子类商务建设</h2>
                       <img src="./images/eshop_service.jpg" alt=""/>
                       <ul>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                       </ul>
                   </div>
                   <div class="four">
                       <h2>电子类商务建设</h2>
                       <img src="./images/eshop_service.jpg" alt=""/>
                       <ul>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                           <li><a href="#">方便的商务管理</a></li>
                       </ul>
                   </div>
               </div>
               <div id="rside">
                   <div class="subtitle">
                       <img src="./images/circle.gif" alt=""/>
                       <h1>文章观点</h1>
                       <a href="#">MORE&gt;&gt;</a>
                   </div>
                   <ul id="art">
                       <li><a href="#">这里填文章</a></li>
                       <li><a href="#">这里填文章</a></li>
                       <li><a href="#">这里填文章</a></li>
                       <li><a href="#">这里填文章</a></li>
                       <li><a href="#">这里填文章</a></li>
                   </ul>
                   <div class="subtitle">
                       <img src="./images/circle.gif" alt=""/>
                       <h1>联系我们</h1>
                       <a href="#">MORE&gt;&gt;</a>
                   </div>
                   <div id="contact"></div>
               </div>
           </div>
           <div class="clear"></div>
           <div id="main2">
               <div class="subtitle">
                   <img src="./images/circle.gif" alt=""/>
                   <h1>工作展示</h1>
                   <a href="#">MORE&gt;&gt;</a>
               </div>
               <div class="four2">
                   <h1>主营业务</h1>
                   <img src="./images/pic8.jpg" alt=""/>
               </div>
               <div class="four2">
                   <h1>主营业务</h1>
                   <img src="./images/pic9.jpg" alt=""/>
               </div>
               <div class="four2">
                   <h1>主营业务</h1>
                   <img src="./images/pic10.jpg" alt=""/>
               </div>
               <div class="four2">
                   <h1>主营业务</h1>
                   <img src="./images/pic11.jpg" alt=""/>
               </div>
               </div>
               <div class="clear"></div>
           <div id="div1">
           <div class="subtitle">
               <img src="./images/circle.gif" alt=""/>
               <h1>主题展示</h1>
               <a href="#">MORE&gt;&gt;</a>
           </div>
               <ol>
                   <li style="margin-top: 100px" class="active"><a href="#">按钮一</a></li>
                   <li><a href="#">按钮二</a></li>
                   <li><a href="#">按钮三</a></li>
               </ol>
               <ul>
                   <li style="display: block"><img src="./images/img1.jpg" alt=""/></li>
                   <li><img src="./images/img2.jpg" alt=""/></li>
                   <li><img src="./images/img3.jpg" alt=""/></li>
               </ul>
               <div class="clear"></div>
           </div>
           <div id="main3">
               <div class="subtitle">
                   <img src="./images/circle.gif" alt=""/>
                   <h1>具体细节</h1>
                   <a href="#">MORE&gt;&gt;</a>
               </div>
               <div class="four3">
                   <img src="./images/pic8.jpg" alt=""/>
                   <h1>HERE GOES AN AWESOME BLOG TITLE</h1>
                   <p>
                       Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis</br>
                       voluptatibus maiores alias consequatur aut perferendis doloribus</br>
                       asperiores repellat. Neque porro quisquam est, qui dolorem ipsum quia</br>
                       dolor sit amet.
                   </p>
               </div>
               <div class="four3">
                   <img src="./images/pic10.jpg" alt=""/>
                   <h1>HERE GOES AN AWESOME BLOG TITLE</h1>
                   <p>
                       Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis</br>
                       voluptatibus maiores alias consequatur aut perferendis doloribus</br>
                       asperiores repellat. Neque porro quisquam est, qui dolorem ipsum quia</br>
                       dolor sit amet.
                   </p>
               </div>
               <div class="four3">
                   <img src="./images/pic9.jpg" alt=""/>
                   <h1>HERE GOES AN AWESOME BLOG TITLE</h1>
                   <p>
                       Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis</br>
                       voluptatibus maiores alias consequatur aut perferendis doloribus</br>
                       asperiores repellat. Neque porro quisquam est, qui dolorem ipsum quia</br>
                       dolor sit amet.
                   </p>
               </div>
           </div>
           <div class="clear"></div>
           <div id="footer">
               <div class="fooTop">
             <h1>CONTACT</h1>
                   <p>RECENT BLOG WRITINGS</p>
                   <img class="img1" src="./images/message.png" alt=""/>
                   <img  class="img2" src="./images/phone.png" alt=""/>
               </div>
               <div class="clear"></div>
               <div class="footext1">
                   <input type="text" value="Your Name">
                   <input type="text" value="Your Phone">
               </div>
               <div class="footext2">
                   <input type="text" value="Message">
               </div>
           </div>
       </div>
</body>
</html>